<template>
  <div>
    <div class="xq_div1">
      <div class="xq_div1_con">
        <img class="xq_div1_con_img" src="../assets/s10016977_165503616415496.jpg" alt="" />
        <div class="xq_div1_text">
          <h1 class="xq_div1_text_h1">赛螃蟹</h1>
          <div class="xq_div1_text_tit">
              <span>用户名称</span>▪
              <span>0</span>
              <span>收藏</span>▪
              <span>175</span>
              <span>浏览</span> 
          </div>

          <div class="xq_div1_text_item">
            <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>
          </div>

          <div class="xq_div1_text_item_con">
            <div class="xq_div1_text_item_con_one">
              <h2 class="xq_div1_text_item_con_one_1">主料</h2>
              <div class="xq_div1_text_item_con_one_2">main</div>
            </div>
            <div class="xq_div1_text_item_con_two">
                <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
                 <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
                  <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
            </div>
          </div>

          <div class="xq_div1_text_item_con22">
            <div class="xq_div1_text_item_con22_lef">
              <h2 class="xq_div1_text_item_con22_lef_1">辅料</h2>
              <div class="xq_div1_text_item_con22_lef_2">others</div>
            </div>
            <div class="xq_div1_text_item_con22_rig">
              <div class="xq_div1_text_item_con22_rig_con">
                <div class="xq_div1_text_item_con22_rig_con_item">味达美清香米醋15毫升</div>
                <div class="xq_div1_text_item_con22_rig_con_item">六月鲜8克轻盐特级原汁酱油15毫升</div>
                <div class="xq_div1_text_item_con22_rig_con_item">葡萄籽油15毫升</div>
              </div>
            </div>
          </div>
        </div>
        <div class="xq_div1_item">
          <img class="xq_div1_item_img" src="../assets/er_wei_ma.png" alt="">
          <h2 class="xq_div1_item_img_text1">扫描二维码</h2>
          <h6 class="xq_div1_item_img_text2">用手机查看这篇菜谱</h6>
          <div class="xq_div1_item_btn">
            <img class="xq_div1_item_btn_img" src="../assets/xinxin.png" alt="">
            <span class="xq_div1_item_btn_text">收藏</span>
          </div>
          <div class="xq_div1_item_foot">
            创建时间：2022-06-12
赛螃蟹的版权归作者所有，没有作者本人的书面许可任何人不得转载或使用其中整体或任何部分内容。
          </div>
        </div>
      </div>
    </div>
    <div class="xq_div2">
      <div class="xq_div2_con">
        <div class="xq_div2_con_lef">
          <div class="xq_div2_con_lef_1">
            <div class="xq_div2_con_lef_1_top">
              <div class="xq_div2_con_lef_1_top_11">
                <div class="xq_div2_con_lef_1_top_item">
                  <img
                    class="xq_div2_con_lef_1_top_img"
                    src="../assets/R.jpg"
                    alt=""
                  />
                  <div class="xq_div2_con_lef_1_top_item_text_box">
                    <div class="xq_div2_con_lef_1_top_item_text">用户名称</div>
                    <div class="xq_div2_con_lef_1_top_item_text2">
                      <span>276 菜谱</span>
                      <span>147 粉丝</span>
                    </div>
                  </div>
                </div>
                <img
                  class="xq_div2_con_lef_1_top_item_img"
                  src="../assets/yinhao.png"
                  alt=""
                />
              </div>
              <div class="xq_div2_con_lef_1_bootm">
                夏天没有什么胃口，可以做上这道仿蟹菜，没有螃蟹那么性寒，鸡蛋含有丰富的蛋白质且容易被人体吸收，翻炒之后倒入灵魂的姜醋汁，就可以以假乱真的在吃螃蟹了
              </div>
            </div>
          </div>
          <h1>赛螃蟹的做法</h1>
          <div v-for="(item, index) in 12" :key="index">
            <div class="xq_div2_con_lef_2">
              <div class="xq_div2_con_lef_2_lef">
                <div class="xq_div2_con_lef_2_lef_con">
                  <h2 class="xq_div2_con_lef_2_lef_h2">步骤</h2>
                  <span class="xq_div2_con_lef_2_lef_span">step</span>
                  <h1>1</h1>
                </div>
              </div>
              <img
                class="xq_div2_con_lef_2_rig"
                src="../assets/s1.jpg"
                alt=""
              />
            </div>
            <h2>准备食材：白玉菇一盒（125克），鸡蛋3个，生姜一块</h2>
            
          </div>
        </div>
        <div class="xq_div2_con_rig">
          <div class="xq_div2_con_rig_top">
            <img
              class="xq_div2_con_rig_top_img"
              src="../assets/2000136191_14.jpg"
              alt=""
            />
            <div class="xq_div2_con_rig_top_text">无版权背景素材</div>
          </div>

          <div class="xq_div2_con_rig_item1">
            <div class="xq_div2_con_rig_item1_box">
              <h2>这道菜适合我吃吗?</h2>
              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血压人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血糖人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血脂人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">减肥人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">儿童</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>
            </div>
          </div>

          <div class="xq_div2_con_rig_item2">
            <div class="xq_div2_con_rig_item2_text">
              <img class="xq_div2_con_rig_item2_img" src="../assets/er_wei_ma.png" alt="">
              <div>扫描二维码     下载APP</div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.xq_div1 {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efeeec;
}
.xq_div1_con {
  width: 1200px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xq_div1_con_img{
  width: 350px;
  height: 535px;
}
.xq_div1_text {
  width: 560px;
  height: 536px;
}
.xq_div1_item {
  width: 260px;
  height: 535px;
  display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: space-around;
  background-color: white;
}
.xq_div1_item_img{
  width: 127px;
  height: 127px;
}
.xq_div1_item_img_text1{
  margin: 0;
}
.xq_div1_item_img_text2{
  margin: 0;
}
.xq_div1_item_btn{
  width: 200px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f66f36;
  border-radius: 5px;
}
.xq_div1_item_btn_img{
  width: 24px;height: 24px;
}
.xq_div1_item_btn_text{
  font-size: 18px;
  font-weight: 600;
  color: white;
}
.xq_div1_item_foot{
  width: 200px;
  height: 110px;
  padding: 26px 30px ;
  background-color: white;
}
.xq_div2 {
  width: 100%;
  min-height: 1000px;
  display: flex;
  justify-content: center;
  background-color: #f7f6f5;
}
.xq_div2_con {
  width: 1200px;
  min-height: 1000px;
  display: flex;
  justify-content: space-between;
}
.xq_div2_con_lef {
  width: 810px;
  min-height: 1000px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xq_div2_con_rig {
  width: 350px;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}
.xq_div2_con_lef_1 {
  width: 810px;
  height: 148px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 10px;
}
.xq_div2_con_lef_2 {
  padding: 30px 30px;
  border-radius: 20px;
  display: flex;
  background-color: #ffffff;
}
.xq_div2_con_lef_2_lef {
  width: 86px;
  height: 128px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe851;
}
.xq_div2_con_lef_2_lef_con {
  width: 70px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.xq_div2_con_lef_2_rig {
  margin-left: 10px;
  border-radius: 20px;
}
.xq_div2_con_lef_2_lef_h2 {
  margin: 0;
}
.xq_div2_con_lef_2_lef_span {
  font-size: 10px;
}
.xq_div2_con_lef_1_top {
  width: 810px;
  height: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}
.xq_div2_con_lef_1_top_11 {
  width: 762px;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
.xq_div2_con_lef_1_top_img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.xq_div2_con_lef_1_top_item {
  display: flex;
}
.xq_div2_con_lef_1_top_item_text_box {
  margin-left: 20px;
}
.xq_div2_con_lef_1_top_item_text {
  font-weight: 600;
  margin-top: 10px;
}
.xq_div2_con_lef_1_top_item_text2 {
  font-size: 13px;
  color: #999999;
  margin-top: 5px;
}
.xq_div2_con_lef_1_top_item_img {
  width: 38px;
  height: 30px;
}
.xq_div2_con_lef_1_bootm {
  width: 762px;
  height: 60px;
  margin-top: 8px;
}
.xq_div2_con_rig_top {
  width: 302px;
  height: 242px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 24px 10px 24px;
  background-color: #ffffff;
  border-radius: 20px;
  margin-bottom: 40px;
}
.xq_div2_con_rig_top_text {
  font-weight: 600;
  margin-top: 5px;
}
.xq_div2_con_rig_top_img {
  width: 302px;
  height: 192px;
}
.xq_div2_con_rig_item1 {
  width: 350px;
  height: 380px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.xq_div2_con_rig_item1_box {
  width: 308px;
  height: 380px;
}
.xq_div2_con_rig_item1_box_1 {
  width: 308px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: aliceblue; */
  background-image: linear-gradient(
    to right,
    rgb(243, 238, 236),
    rgb(241, 232, 146)
  );
  border: 1px solid #ffe08e;
  border-radius: 5px;
  margin-top: 10px;
}
.xq_div2_con_rig_item1_box_1_img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 6px 6px;
  background-color: #ffbe11;
}
.xq_div2_con_rig_item1_box_1_text {
  font-weight: 600;
  margin-left: 10px;
}
.xq_div2_con_rig_item1_box_2_img {
  width: 14px;
  height: 14px;
  margin-left: 100px;
}
.xq_div2_con_rig_item1_box_2_text {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  color: #ffba01;
}
.xq_div2_con_rig_item1_box_1_big {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xq_div2_con_rig_item1_box_1_big2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xq_div2_con_rig_item2 {
  width: 350px;
  height: 643px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  margin-top: 40px;
  background-image: url("../assets/00007.jpg");
  background-size: 100%;
  cursor: pointer;
  /* -webkit-animation: 3s; */
  background-size: 350px 643px;
}
.xq_div2_con_rig_item2:hover{
  transition: 1s;
background-size: 360px 653px;
}
.xq_div2_con_rig_item2_text{
display: flex;
width: 230px;
height: 230px;
margin-top: 38px;
background-color: white;
border-radius: 20px;
flex-direction: column;
    align-items: center;
    justify-content: center;
}
.xq_div2_con_rig_item2_img{
  width: 150px;
    height: 150px;
    padding: 20px 20px;
    
}
.xq_div1_text_h1{
  margin: 0;
  margin-left: 20px;
}
.xq_div1_text_tit{
  color: #666666;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 10px;
}
.xq_div1_text_item{
  width: 560px;
  height: 160px;
  display: flex;
 margin-top: 20px;
  /* background-color: #ffe08e; */
}
.xq_div1_text_item_one{
  width: 80px;
  height: 160px;
  border-radius: 20px;
  display: flex;
      flex-direction: column;
    align-items: center;
    /* justify-content: space-around; */
  background-color: #ffffff;
  margin-left: 20px;
}
.xq_div1_text_item_one_img{
  width: 50px;
  height: 50px;
  padding: 10px 10px ;
  border-radius: 50%;
  margin-top: 20px;
  background-color: #fafafa;
}
.xq_div1_text_item_one_t{
  font-size: 12px;
  color: #b3b3b3;
  margin-top: 20px;
}
.xq_div1_text_item_one_t1{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.xq_div1_text_item_con{
  width: 520px;
  height: 70px;
  margin-left: 20px;
  border-radius: 20px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.xq_div1_text_item_con_one{
  width: 80px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.xq_div1_text_item_con_one_1{
  margin: 0;
}
.xq_div1_text_item_con_one_2{
  font-size: 12px;
  font-weight: 600;
}
.xq_div1_text_item_con_two{
  width: 400px;
  height: 44px;
  display: flex;
  align-items: center;
  
}
.xq_div1_text_item_con_two_text{
  width: 80px;
  height: 20px;
 padding: 10px 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 5px;
 font-size: 13px;
 background-color: #f5f5f5;
 border-radius: 20px;
}
.xq_div1_text_item_con22{
 width: 520px;
 height: 158px;
  margin-left: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin-top: 10px;
 background-color: white;
}
.xq_div1_text_item_con22_lef{
   width: 80px;
  height: 158px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.xq_div1_text_item_con22_lef_1{
  margin: 0;
}
.xq_div1_text_item_con22_lef_2{
   font-size: 12px;
  font-weight: 600;
}

.xq_div1_text_item_con22_rig_con{
  width: 400px;
  height: 132px;
  display: flex;
  flex-direction: column;
    justify-content: space-around;
  /* background-color: #ffffff; */
}
.xq_div1_text_item_con22_rig_con_item{
      width: 220px;
    height: 20px;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    font-size: 13px;
    background-color: #f5f5f5;
    border-radius: 20px;
}

</style>